@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

*, *::after, *::before {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: $color-3;
}

a {
	color: $color-2;
	text-decoration: none;
}

/* -------------------------------- 

General Style

-------------------------------- */

.cd-intro {
	position: relative;
	height: 100vh;
	width: 100%;
	/* vertically align its content */
	display: table;
	background: $color-2;
	overflow: hidden;
}

.cd-intro-content {
	/* vertically align inside its parent */
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 0 5%;
	background: $color-2;
	@include font-smoothing;

	h1 {
		font-size: 2.4rem;
		color: $color-3;
	}

	p {
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1.4;
		margin: 1em 0;
		color: tint($color-2, 30%);
	}

	.action-wrapper {
		@include clearfix;
		display: inline-block;
	}

	.action-wrapper > * {
		float: left;
	}

	@include MQ(M) {
		
		h1 {
			font-size: 5.2rem;
			font-weight: 300;
		}

		p {
			font-size: 1.6rem;
			margin: 1.5em 0 1.9em;
		}
	}
}

.cd-btn {
	display: inline-block;
	padding: 1.2em 1.4em;
	font-size: 1.3rem;
	color: $color-3;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	background-color: shade($color-2, 30%);
	border-radius: .25em;
	margin-right: 1.5em;

	&:nth-of-type(2) {
		margin-right: 0;
	}

	&.main-action {
		background-color: $color-4;
	}

	@include MQ(S) {
		padding: 1.2em 1.6em;
	}

	@include MQ(M) {
		padding: 1.4em 1.8em;
	}
}

.cd-intro-content h1,
.cd-intro-content h1 span,
.cd-intro-content p,  
.cd-intro-content .cd-btn {
	opacity: 0;
	@include animation-duration(.8s);
	@include animation-delay(.3s);
	@include animation-fill-mode(forwards);

	.no-cssanimations & {
		opacity: 1;
	}
}

/* -------------------------------- 

Bouncy 

-------------------------------- */

.bouncy.cd-intro-content h1 {
	@include animation-name(cd-bounce-right);
}

.bouncy.cd-intro-content p {
	@include animation-name(cd-bounce-left);
}

.bouncy.cd-intro-content h1,
.bouncy.cd-intro-content p {
	@include animation-duration(.6s);
}

.bouncy.cd-intro-content .cd-btn {
	@include animation-name(cd-bounce-rotate);
}

.bouncy.cd-intro-content .cd-btn {
	@include animation-duration(.5s);
}

.bouncy.cd-intro-content .cd-btn.main-action {
	@include animation-delay(.4s);
}

@include bounce(cd-bounce-right, -200px, 15px); // mixin inside partials > mixins.scss
@include bounce(cd-bounce-left, 200px, -15px);

@include keyframes(cd-bounce-rotate) {
	0% {
		opacity: .2;
		@include transform(perspective(800px) rotateX(-80deg));
	}

	20% {
		opacity: 1;
	}

	60% {
		@include transform(perspective(800px) rotateX(20deg));
	}

	100% {
		opacity: 1;
		@include transform(perspective(800px) rotateX(0));
	}
}

/* -------------------------------- 

Cut

-------------------------------- */

.cut.cd-intro-content h1 {
	position: relative;
	/* overwrite default style */
	opacity: 1;
	font-weight: 700;
	color: transparent;

	span {
		/* 2 span elements are used to create the cut effect */
		display: block;
		position: absolute;
		width: 100%;
		height: 50%;
		left: 0;
		overflow: hidden;
		color: $color-3;

		&:first-of-type {
			top: 0;
		}

		&:last-of-type {
			bottom: 0;
		}
	}

	span:first-of-type::before, 
	span:last-of-type::after {
		/* span:first-of-type::before - top half of the text */
		/* span:last-of-type::after - bottom half of the text */
		content: attr(data-content);
		position: absolute;
		width: 100%;
		left: 0;
		color: $color-3;
	}

	span:first-of-type::before {
		top: 0;
	}

	span:last-of-type::after {
		bottom: 0;
	}
}

.cut.cd-intro-content .cd-btn {
	/* overwrite default style */
	margin-right: 0;
	border-radius: 0;
}

.cut.cd-intro-content h1 span,
.cut.cd-intro-content p,
.cut.cd-intro-content .cd-btn {
	@include animation-duration(.6s);
}

.cut.cd-intro-content h1 span,
.cut.cd-intro-content p {
	@include animation-name(cd-slide-left);
}

.cut.cd-intro-content h1 span:first-of-type {
	@include animation-delay(.4s);
}

.cut.cd-intro-content p {
	@include animation-delay(.5s);
}

.cut.cd-intro-content .cd-btn {
	@include animation-name(cd-slide-left-btn);
	@include animation-delay(.55s);
}

@include cut(cd-slide-left, 100vw); // mixin inside partials > mixins.scss
@include cut(cd-slide-left-btn, 150vw);

/* -------------------------------- 

Reveal

-------------------------------- */

.reveal.cd-intro-content h1 {
	position: relative;
	/* overwrite default style */
	opacity: 1;
	font-weight: 700;
	/* <h1> text is not visible - it is used only as a container for the ::after element */
	color: transparent;
	overflow: hidden;

	&::after {
		/* this is the animated text */
		content: attr(data-content);
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		color: $color-3;
		opacity: 0;
		@include animation-name(cd-reveal-up);
		@include animation-fill-mode(forwards);
	}

	.no-cssanimations &::after {
		opacity: 1;
	}

	@include MQ(M) {
		@include transform(translateY(5px));
	}
}

.reveal.cd-intro-content p {
	position: relative;
	margin: 0;
	padding: 1em;
	background-color: shade($color-2, 30%);
	@include animation-name(cd-reveal-down);

	@include MQ(L) {
		padding: 1em 1.6em;
	}
}

.reveal.cd-intro-content h1::after,
.reveal.cd-intro-content p {
	@include animation-duration(.4s);
	@include animation-delay(.7s);
}

.reveal.cd-intro-content .action-wrapper {
	position: relative;
	overflow: hidden;
	
	&::before {
		/* this is the loading bar */
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 3px;
		width: 100%;
		background-color: shade($color-2, 30%);
		@include animation(cd-loading .4s .3s backwards);
	}

	.cd-btn {
		display: block;
		opacity: 1;
		max-width: 200px;
		margin: 1em auto 0;
	}

	@include MQ(M) {

		.cd-btn {
			display: inline-block;
			margin: 0 0 0 1em;
		}
	}
}

@include reveal(cd-reveal-up, 100%); // mixin inside partials > mixins.scss
@include reveal(cd-reveal-down, -100%);

@include keyframes(cd-loading) {
	0% {
		@include transform(scaleX(0));
	}

	100% {
		@include transform(scaleX(1));
	}
}

/* -------------------------------- 

Mask

-------------------------------- */
.mask.cd-intro-content h1 {
	position: relative;
	padding-bottom: 10px;
	/* overwrite default style */
	opacity: 1;
	font-weight: 700;
	/* <h1> text is not visible - it is used only as a container for the ::after element */
	color: transparent;
	overflow: hidden;

	&::after {
		/* this is the animated text */
		content: attr(data-content);
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		color: $color-3;
		@include animation-name(cd-reveal-up);
		@include animation-fill-mode(backwards);
	}

	span {
		position: relative;
		display: inline-block;
		opacity: 1;

		&::before {
			/* this is the loading bar */
			content: '';
			position: absolute;
			top: calc(100% + 8px);
			left: -1em;
			height: 2px;
			width: calc(100% + 2em);
			background-color: $color-3;
			@include animation(cd-loading-mask 1s .3s both);
		}
	}

	@include MQ(M) {
		padding-bottom: 20px;

		span::before {
			top: calc(100% + 18px);
		}
	}
}

.mask.cd-intro-content p {
	position: relative;
	margin: 0;
	padding: 10px 0 0;
	@include animation-name(cd-reveal-down);

	@include MQ(M) {
		padding-top: 20px;
	}
}

.mask.cd-intro-content h1::after,
.mask.cd-intro-content p {
	@include animation-duration(.4s);
	@include animation-delay(.7s);
}

.mask.cd-intro-content .action-wrapper {
	overflow: hidden;

	.cd-btn {
		opacity: 1;
		margin: 0 0 0 1.5em;

		&:first-of-type {
			margin-left: 0;
		}
	}
}

@include keyframes(cd-loading-mask) {
	0%, 100% {
		@include transform(scaleX(0));
	}

	40%, 60% {
		@include transform(scaleX(1));
	}
}

/* -------------------------------- 

Mask 2

-------------------------------- */

.mask-2.cd-intro-content * {
	/* overwrite default style */
	opacity: 1;
}

.mask-2.cd-intro-content .content-wrapper {
	position: relative;
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	padding: 2em 0;
	overflow: hidden;

	&::before {
		/* vertical bar */
		content: '';
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		height: 100%;
		width: 2px;
		background-color: $color-3;
		@include animation(cd-pulse 1.3s .3s both);
	}

	.no-cssanimations &::before {
		opacity: 0;
	}

	> div {
		/* wrap the entire content */
		position: relative;
		z-index: 1;
	}
}

.mask-2.cd-intro-content .content-wrapper, 
.mask-2.cd-intro-content .content-wrapper > div {
	@include animation-duration(0.5s);
	@include animation-delay(1.1s);
	@include animation-fill-mode(backwards);
}

.mask-2.cd-intro-content .content-wrapper {
	@include animation-name(cd-mask-wrapper);
}

.mask-2.cd-intro-content .content-wrapper > div {
	@include animation-name(cd-mask-content);
}

@include mask2(cd-mask-wrapper, 50%); // mixin inside partials > mixins.scss
@include mask2(cd-mask-content, -100%);

@include keyframes(cd-pulse) {

	0%, 30.8% {
		opacity: 0;
	}

	15.4%, 46.2%, 61.5%, 70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* -------------------------------- 

scale

-------------------------------- */

.scale.cd-intro-content * {
	/* overwrite default style */
	opacity: 1;
}

.scale.cd-intro-content {
	/* overwrite default style */
	background-color: transparent;
	/* Force hardware acceleration */
	@include transform(translateZ(0));
	@include backface-visibility(hidden);
	
	@include animation(cd-scale-in .6s .3s both);
}

@include keyframes(cd-scale-in) {
	0% {
		opacity: 0;
		@include transform(scale(3));
	}

	100% {
		opacity: 1;
		@include transform(scale(1));
	}
}

/* -------------------------------- 

Parallax

-------------------------------- */
.parallax.cd-intro-content * {
	/* overwrite default style */
	opacity: 1;
}

.parallax.cd-intro-content h1 span, 
.parallax.cd-intro-content p span {
	position: relative;
	display: inline-block;
	padding: .5em 1em;
	/* span text is not visible */
	color: transparent;

	&::before, &::after {
		position: absolute;
		left: 0;
		width: 100%;
	}

	&::before {
		/* this is used to create the background colored layer */
		content: '';
		height: 100%;
		top: 0;
		background-color: shade($color-2, 30%);
	}

	&::after {
		/* this is used to create the text */
		content: attr(data-content);
		top: .5em;
	}
}

.parallax.cd-intro-content h1 {
	font-size: 2.2rem;

	span::after {
		color: $color-3;
	}

	@include MQ(M) {
		font-size: 5.4rem;
	}
}

.parallax.cd-intro-content p span::after {
	color: tint($color-2, 30%);
}

.parallax .cd-btn {
	color: shade($color-2, 30%);
	background-color: $color-3;
	margin-top: .6em;
	/* overwrite default style */
	border-radius: 0;
	margin-right: 0;

	&.main-action {
		background-color: $color-4;
		color: $color-3;
		padding: 1.8em 2.2em;
		margin-top: 0;
	}

	@include MQ(M) {

		&.main-action {
			padding: 2em 3em;
		}
	}
}

.parallax.cd-intro-content h1 span::after,
.parallax.cd-intro-content h1 span::before, 
.parallax.cd-intro-content p span::after,
.parallax.cd-intro-content p span::before,
.parallax.cd-intro-content .cd-btn {
	@include animation-name(cd-slide-up);
	@include animation-duration(.4s);
	@include animation-fill-mode(backwards);
}

.parallax.cd-intro-content h1 span::after {
	@include animation-delay(.3s);
}

.parallax.cd-intro-content h1 span::before {
	@include animation-delay(.4s);
}

.parallax.cd-intro-content p span::after {
	@include animation-delay(.5s);
}

.parallax.cd-intro-content p span::before {
	@include animation-delay(.6s);
}

.parallax.cd-intro-content .cd-btn {
	@include animation-delay(.7s);
}

.parallax.cd-intro-content .cd-btn.main-action {
	@include animation-delay(.8s);
}

@include keyframes(cd-slide-up) {
	0% {
		opacity: 0;
		@include transform(translateY(30vh));
	}

	100% {
		opacity: 1;
		@include transform(translateY(0));
	}
}
/* -------------------------------- 

Video 

-------------------------------- */

.cd-intro.video {
	display: block;
}

.video.cd-intro-content {
	display: block;
	height: 100%;
	position: relative;

	* {
		opacity: 1;
	}

	.svg-wrapper {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	svg {
		position: absolute;
		@include center;
		opacity: 0.8;

		&.svg-mask {
			/* this is the svg mask used on desktop version */
			display: none;
		}
	}

	p, .action-wrapper {
		position: absolute;
		z-index: 3;
		left: 50%;
		@include transform(translate(-50%, -50%));
	}
	
	p {
		bottom: calc(50% + 80px);
		margin: 0;
		color: $color-1;
		min-width: 90%;
	}

	.action-wrapper {
		top: calc(50% + 120px);
		min-width: 295px;
	}

	.cd-btn {
		background-color: rgba($color-1, .4);

		&.main-action {
			background-color: $color-4;
		}
	}

	@include MQ(M) {

		svg.svg-mask-mobile {
			display: none;
		}

		svg.svg-mask {
			display: block;
		}

		p {
			bottom: calc(50% + 40px);
		}

		.action-wrapper {
			top: calc(50% + 80px);
		}
	}
}

.cd-bg-video-wrapper {
	/* background cover video */
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: url(../assets/bg-img.jpg) no-repeat center center;
	background-size: cover;

	video {
		/* you won't see this element in the html, but it will be injected using js */
		display: block;
		position: absolute;
		@include center;
		min-height: 100%;
		min-width: 100%;
		max-width: none;
		height: auto;
		width: auto;
	}

	&::after {
		/* never visible - this is used in jQuery to check the current MQ */
		display: none;
		content: 'mobile';
	}

	@include MQ(M) {

		&::after {
			content: 'desktop';
		}
	}
}